<template>
  <div class="login-container">
    <van-nav-bar title="我的" class="page-nav-bar"/>
    <!-- 已登录 -->
    <div v-if="token">
      <van-cell class="my-dlym">
        <!-- 左侧 -->
        <router-link to="/edit">
          <van-image round width="5rem" height="5rem" :src="'http://124.223.14.236:8060/'+myusif.icon"/>
        </router-link>
        <div class="wy">
          <span class="dl">{{myusif.username}}</span><br />
          <span class="jianjei">{{myusif.notes}}</span>
        </div>
       </van-cell>
       <span class="xq">
          <router-link to="/edit"><van-icon name="setting-o" class="bai"/></router-link>
       </span>
       <!-- 宫格导航 -->
       <van-grid :column-num="3" clickable>
          <van-grid-item class="grid-item">
              <span class="size"><van-icon name="like-o"/></span>
              <span class="text">收藏{{user.collectNum}}篇</span>
           </van-grid-item>
           <van-grid-item class="grid-item">
              <span class="size"><van-icon name="thumb-circle-o" /></span>
               <span class="text">点赞{{user.zanNum}}篇</span>
           </van-grid-item>
             <van-grid-item class="grid-item">
              <span class="size"><van-icon name="newspaper-o" /></span>
               <span class="text">发布{{user.articleNum}}篇</span>
           </van-grid-item>
       </van-grid>

       <van-cell-group>
        <router-link to="/article">
          <van-cell icon="send-gift-o" title="我的文章">
            <van-icon name="arrow" />
          </van-cell>
        </router-link>
        <router-link to="/sc">
          <van-cell icon="diamond-o" title="我的收藏">
            <van-icon name="arrow" />
          </van-cell>
        </router-link>
        <router-link to="/zan">
          <van-cell icon="thumb-circle-o" title="我的点赞">
            <van-icon name="arrow" />
          </van-cell>
        </router-link>
      </van-cell-group>
      <div class="but"><van-button type="info" block @click="quit"><span class="btn">立即退出</span></van-button></div>
    </div>

    <!-- 未登录 -->
    <div v-else>
      <van-cell class="my-dlym">
        <router-link to="/login">
          <van-image round width="5rem" height="5rem" src="https://img01.yzcdn.cn/vant/cat.jpeg"/>
        </router-link>
        <div class="wy">
          <span class="dl">请登录</span><br />
          <span class="jianjei">登录之后更加精彩</span>
        </div>
        <span class="tubiao">
          <router-link to="/login"><van-icon name="arrow" /></router-link>
        </span>
       </van-cell>
      <van-cell-group>
        <router-link to="/login">
          <van-cell icon="send-gift-o" title="我的文章">
            <van-icon name="arrow" />
          </van-cell>
        </router-link>
        <router-link to="/login">
          <van-cell icon="diamond-o" title="我的收藏">
            <van-icon name="arrow" />
          </van-cell>
        </router-link>
        <router-link to="/login">
          <van-cell icon="thumb-circle-o" title="我的点赞" >
            <van-icon name="arrow" />
          </van-cell>
        </router-link>
      </van-cell-group>
    </div>
  </div>
</template>

<script>
import{ mapGetters} from 'vuex'
import {getUserInfo} from '@/api/login'
export default {
  data() {
    return {
      user:{},
      myusif:{}
    }
  },
  computed:{
    ...mapGetters(['token'])
  },
  created(){
     this.loadUserInfo()
  },
  methods:{
    async quit(){
      // 确认框
      try {
        await this.$dialog.confirm({
          title: '提示',
          message: '退出将会清空所有数据？',
        })
      } catch (error) {
        return console.log(error)
      }
      // 清楚本地数据和state
      this.$store.commit('setUser',{})
    }, 
    // async quit() {
    //   // 确认框
    //   try {
    //     await this.$dialog.confirm({
    //       title: "提示",
    //       message: "退出将会清空所有数据？",
    //     });
    //   } catch (error) {
    //     return console.log(error);
    //   }
    //   // 清除本地数据和state
    //   this.$store.commit("setUser", {});
    //   // localStorage.setItem("userId", "");
    // },
    async loadUserInfo(){
      try {
        let {data} =await getUserInfo()
        console.log(data.data);
        this.user=data.data
        this.myusif=data.data.userInfo
      } catch (error) {
        console.log(error);
      }
    }
  }
};
</script>

<style>
.but{
  margin: 10px;
   color: #fff;

}
.btn{
   color: #fff;
   font-size: 20px;
}
.wy {
  display: inline-block;
  position: absolute;
  top: 18px;
  left: 88px;
  z-index: 9;
  color: #fff;
}
.wy .dl {
  font-weight: 600;
  font-size: 16px;
  color: #fff;
}
.wy .jianjei {
  font-size: 12px;
  color: #fff;
}
.tubiao a {
  color: #fff;
}
.my-dlym {
  background-color: #3296fa !important;
}
.tubiao {
  float: right;
  color: #fff;
  font-size: 40px;
  margin-top: 20px;
}
.van-cell__title{
  color: #000;
  
}
.xq{
    position: absolute;
    right: 14px;
    top: 10px;
    font-size: 22px;
    z-index: 9; 
}
.bai{
  color: #fff;
}
 
.grid-item {
  height: 110px;
  padding: 0; 
}
.size{
  font-size: 36px;
}
.text {
  font-size: 16px;
}

</style>
